<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.一个Hello效果</title>
		<!-- 引入Vue核心库 -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>

	<body>
		<!-- 
				总结：
						1.Vue实例和容器是一一对应的，真实开发中只有一个Vue实例，而且还会配合组件一起使用。
						2.data中的数据，只要发生改变，模板中用到该数据的地方就会自动更新（局部更新）。
						3.{{xxx}}中的xxx要写js表达式，且xxx可以直接看到data中配置的属性。

						注意区分【js表达式】与【js语句（代码）】
							1.表达式：会产生一个值，可以放在任何一个需要值的地方
									(1). 1
									(2). a
									(3). demo()
									(4). x === y ? 1 : 0
									(5). 200 - 2
									(6). arr.map()
							2.语句（代码）: 不会产生值，只是控制代码走向
									(1). if(){}
									(2). for(){}
									(3). try{} catch(err){}
									等等....
		-->

		<!-- 提前准备好一个容器 -->
		<div id="demo">
			<h1>学校名：{{name}}</h1>
			<h1>电话：{{tel}}</h1>
			<h1>地址：{{address}}</h1>
			<h1>测试1：{{name.toUpperCase()}}</h1>
			<h1>测试2：{{name.slice(0,2)}}</h1>
			<h1>测试3：{{1+1}}</h1>
			<h1>测试4：1+1</h1>
			<h1>测试5：{{ age >= 18 ? '成年' : '未成年' }}</h1>
		</div>

		<script type="text/javascript" >
			//关闭掉Vue的生产提示
			Vue.config.productionTip = false

			//创建一个Vue实例，且要传入一个配置对象
			new Vue({
				el:'#demo',
				data:{
					name:'atguigu',
					tel:'010-56253825',
					address:'宏福科技园',
					age:9
				}
			}) 
		</script>

	</body>

</html>